import React from 'react';
import type { FormProps } from 'antd';
import { Button, Checkbox, Form, Input } from 'antd';
import http from '../../api/http';
import { useNavigate } from 'react-router-dom';
import tu from '../../img/1.png'

type FieldType = {
  account?: string;
  password?: string;
  remember?: string;
};

const App: React.FC = () => {
  const navigate = useNavigate()

  const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
    const res = await http.post('/login', values)
    console.log(res, '登录')
    if (res.data.token) {
      localStorage.setItem('token', res.data.token)
      navigate('/')
    }
  };

  const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };


  return (
    <div>
      <img style={{ position: 'absolute', width: "100vw", height: "100vh" }} src={tu} alt="" />
      <div style={{ position: 'relative',right:'100px', width: '500px', height: "300px", background: '#06154e66', padding: "60px",marginLeft:"1300px",paddingTop:"230px",paddingBottom:"200px" }}>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <h1 style={{ marginLeft: "130px", color: "#fff" }}>物联网综合业务支撑云平台</h1>
          <Form.Item<FieldType>
            label="用户名"
            name="account"
            rules={[{ required: true, message: '请输入用户名!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item<FieldType>
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入密码!不少于6-12' }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item<FieldType> name="remember" valuePropName="checked" label={null}>
            <Checkbox style={{ color: "#fff" }}>记住密码</Checkbox>
          </Form.Item>

          <Form.Item label={null}>
            <Button style={{ width: "350px", height: '45px', marginLeft: "-10px", color: "#fff" }} type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default App;